<template>
  <div class="app-container">
    <div class="header">
      <div class="filter-container">
        <el-input
          v-model="keyword"
          placeholder="保险信息"
          style="width: 200px; margin-right: 10px"
        />
        <el-button
          v-waves
          type="primary"
          icon="el-icon-search"
          @click="handlerSearch"
        >
          搜索
        </el-button>
        <!-- 级联选择器 -->
        <el-cascader
          v-model="value"
          :options="options"
          :props="{ expandTrigger: 'hover' }"
          separator=" > "
          placeholder="筛选"
          filterable
          style="margin-left: 20px"
          clearable
          @change="handleFilter"
        />
      </div>
      <div class="util-container">
        <el-button
          style="margin-left: 10px"
          type="primary"
          icon="el-icon-edit"
          @click="createDialog = true"
        >
          添加
        </el-button>
        <el-button
          v-waves
          :loading="downloadLoading"
          type="primary"
          icon="el-icon-download"
          @click="handleDownload"
        >
          导出
        </el-button>
      </div>
    </div>
    <div class="body">
      <el-table
        v-loading="listLoading"
        :data="list"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        style="width: 100%"
      >
        <el-table-column fixed prop="id" label="编号" />
        <el-table-column prop="name" label="保险名" />
        <el-table-column prop="category" label="保险种类" />
        <el-table-column prop="company" label="保险公司" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-popconfirm
              title="操作不可逆，确定删除？"
              icon-color="red"
              icon="el-icon-info"
              @confirm="handlerDel(scope.row)"
            >
              <el-button
                slot="reference"
                v-waves
                size="small"
                type="text"
                style="color: red"
              >删除</el-button>
            </el-popconfirm>
            <i style="color: #ccc"> | </i>
            <el-button
              v-waves
              size="small"
              type="text"
              @click="handlerEdit(scope.row)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.pageNo"
        :limit.sync="listQuery.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 修改抽屉 -->
    <el-drawer
      title="修改保险信息"
      :visible.sync="drawer"
      class="drawer-container"
    >
      <el-form ref="editForm" :model="editForm" label-width="80px">
        <el-form-item label="编号" class="title-no">
          {{ editForm.id }}
        </el-form-item>
        <el-divider />
        <el-form-item label="保险名">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="保险种类">
          <el-select v-model="editForm.category" placeholder="请选择保险种类">
            <el-option label="百万医疗险" value="百万医疗险" />
            <el-option label="高端医疗险" value="高端医疗险" />
            <el-option label="中端医疗险" value="中端医疗险" />
            <el-option label="小额医疗险" value="小额医疗险" />
          </el-select>
        </el-form-item>
        <el-form-item label="保险公司">
          <el-radio-group v-model="editForm.company">
            <el-radio label="中国人寿" border />
            <el-radio label="中国平安" border />
            <el-radio label="中国太平" border />
            <el-radio label="泰康保险" border />
          </el-radio-group>
        </el-form-item>

        <el-form-item class="drawer-footer" label-width="0">
          <el-divider />
          <div class="footer-button">
            <el-button type="primary" @click="onSubmitEditForm">提交</el-button>
            <el-button @click="drawer = false">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 新增保险对话框 -->
    <el-dialog
      title="新增保险产品信息"
      :visible.sync="createDialog"
      class="create-diaglog"
      width="40%"
    >
      <el-form :model="createForm">
        <el-form-item label="保险名称" label-width="80px">
          <el-input v-model="createForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="保险类别" label-width="80px">
          <el-select v-model="createForm.category" placeholder="请选择保险种类">
            <el-option label="百万医疗险" value="百万医疗险" />
            <el-option label="高端医疗险" value="高端医疗险" />
            <el-option label="中端医疗险" value="中端医疗险" />
            <el-option label="小额医疗险" value="小额医疗险" />
          </el-select>
        </el-form-item>
        <el-form-item label="保险公司" label-width="80px">
          <el-select v-model="createForm.company" placeholder="请选择保险公司">
            <el-option label="中国人寿" value="中国人寿" />
            <el-option label="中国平安" value="中国平安" />
            <el-option label="中国太平" value="中国太平" />
            <el-option label="泰康保险" value="泰康保险" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createDialog = false">取 消</el-button>
        <el-button type="primary" @click="handlerCreate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getProList,
  editProList,
  delProList,
  addProList
} from '@/api/production'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'
export default {
  name: 'ProCountManager',
  components: {
    Pagination
  },
  directives: { waves },
  data() {
    return {
      // 分页数据
      total: 0,
      list: [],
      tempList: [],
      // 发送分页请求的数据
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        name: '',
        category: '',
        company: ''
      },
      // 导出loading效果
      downloadLoading: false,
      // 列表渲染loading效果
      listLoading: false,
      // 控制抽屉的打开和关闭,
      drawer: false,
      // 控制对话框的关闭
      createDialog: false,
      // 编辑表单域
      editForm: {
        id: 0,
        name: '',
        category: '',
        company: ''
      },
      // 级联选择器信息
      value: [],
      options: [
        {
          value: '中国人寿',
          label: '中国人寿',
          children: [
            {
              value: '百万医疗险',
              label: '百万医疗险'
            },
            {
              value: '高端医疗险',
              label: '高端医疗险'
            },
            {
              value: '中端医疗险',
              label: '中端医疗险'
            },
            {
              value: '小额医疗险',
              label: '小额医疗险'
            }
          ]
        },
        {
          value: '中国平安',
          label: '中国平安',
          children: [
            {
              value: '百万医疗险',
              label: '百万医疗险'
            },
            {
              value: '高端医疗险',
              label: '高端医疗险'
            },
            {
              value: '中端医疗险',
              label: '中端医疗险'
            },
            {
              value: '小额医疗险',
              label: '小额医疗险'
            }
          ]
        },
        {
          value: '中国太平',
          label: '中国太平',
          children: [
            {
              value: '百万医疗险',
              label: '百万医疗险'
            },
            {
              value: '高端医疗险',
              label: '高端医疗险'
            },
            {
              value: '中端医疗险',
              label: '中端医疗险'
            },
            {
              value: '小额医疗险',
              label: '小额医疗险'
            }
          ]
        },
        {
          value: '康泰保险',
          label: '康泰保险',
          children: [
            {
              value: '百万医疗险',
              label: '百万医疗险'
            },
            {
              value: '高端医疗险',
              label: '高端医疗险'
            },
            {
              value: '中端医疗险',
              label: '中端医疗险'
            },
            {
              value: '小额医疗险',
              label: '小额医疗险'
            }
          ]
        }
      ],
      // 查询关键字
      keyword: '',
      // 新增保险表单信息
      createForm: {
        name: '',
        category: '',
        company: ''
      },
      // 保险列表列表
      categoryList: []
    }
  },
  created() {
    this.getList()
    // 获取保险类别列表,之后补上
  },
  methods: {
    getList() {
      // 获取列表信息之前主动清空级联选择器
      this.value = []
      // loading 样式
      this.listLoading = true
      getProList(this.listQuery).then((res) => {
        this.list = res.data.rows
        this.tempList = res.data.rows
        this.total = Number(res.data.total)
        setTimeout(() => {
          this.listLoading = false
        }, 500)
      })
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handlerEdit(scope) {
      this.drawer = true
      this.editForm = { ...scope }
    },
    async handlerDel(scope) {
      const res = await delProList(scope.id)
      if (res.code === 200) {
        this.$notify({
          title: '成功',
          message: '保险删除成功',
          type: 'success'
        })
        // 删除成功后，返回第一页
        this.listQuery.pageNo = 1
        this.getList()
      } else {
        this.$notify.error({
          title: '错误',
          message: '呜呜呜...出问题'
        })
      }
    },
    // 表单提交
    async onSubmitEditForm() {
      this.drawer = false
      const res = await editProList(this.editForm)
      if (res.code === 200) {
        this.$notify({
          title: '成功',
          message: '修改保险信息成功',
          type: 'success'
        })
        this.getList()
      } else {
        this.$notify.error({
          title: '错误',
          message: '呜呜呜...出问题'
        })
      }
    },

    // 处理筛选功能
    handleFilter(arr) {
      if (arr.length !== 0) {
        this.list = Array.from(
          this.tempList.filter(
            (v) => v.company === arr[0] && v.category === arr[1]
          )
        )
      } else {
        this.list = Array.from(this.tempList)
      }
    },
    // 处理查询信息
    handlerSearch() {
      this.list = Array.from(
        this.tempList.filter((v) => v.name.includes(this.keyword))
      )
    },
    // 处理新增
    async handlerCreate() {
      this.createDialog = false
      const res = await addProList(this.createForm)
      if (res.code === 200) {
        this.$message({
          message: '新增成功',
          type: 'success'
        })
        this.getList()
      } else {
        this.$message.error('呜呜呜...新增失败')
      }
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then((excel) => {
        const tHeader = ['编号', '保险名', '保险类名', '保险公司']
        const filterVal = ['id', 'name', 'category', 'company']
        const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '保险产品表单信息表'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.list.map((v) =>
        filterVal.map((j) => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
// .body {
  // .el-table__body-wrapper {
    // 这地方好奇怪，以后解决
    // .el-table__row {
      // td[class^="el-table"]{
      //   &:nth-child(1),
      //   &:nth-child(2) {
      //     width: 15%;
      //   }
      //   &:nth-child(3),
      //   &:nth-child(4) {
      //     width: 30%;
      //   }
      //   &:nth-child(5) {
      //     width: 10%;
      //   }
      // }
    // }
  // }
// }
.footer {
  text-align: center;
}
.drawer-container {
  .el-form {
    .el-input,
    .el-select {
      width: 90%;
    }
  }
  .el-radio-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .el-radio {
      margin: 5px 0;
    }
  }
  .drawer-footer {
    .footer-button {
      display: flex;
      justify-content: space-around;
    }
  }
}

.create-diaglog {
  margin: 0 auto;
  .el-dialog {
    .el-dialog__body {
      .el-input,
      .el-select {
        width: 300px;
      }
    }
    .el-form {
      width: 400px !important;
      margin: auto;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: space-around;
}
</style>
